import React, { useState } from "react";
import { Outlet, Link, useLocation, matchPath } from "react-router-dom";
import { Layout, Menu, Breadcrumb, Dropdown, Button } from "antd";
import withAuthorization from "../components/Authorization";

import { asyncRoutes } from "../routes";
import { XRoutes } from "../routes/types";

import "./index.less";
import avatar from "./avatar.gif";

const {
	Header,
	Content,
	// Footer,
	Sider,
} = Layout;
const { SubMenu } = Menu;

const findBreadcrumbTitle = (pathname: string, asyncRoutes: XRoutes) => {
	for (let i = 0; i < asyncRoutes.length; i++) {
		const route = asyncRoutes[i];

		for (let j = 0; j < (route.children as XRoutes).length; j++) {
			const item = (route.children as XRoutes)[j];

			const to =
				(route.path as string) === "/"
					? "/" + item.path
					: route.path + "/" + item.path;

			// if (to === pathname) {
			if (matchPath(to, pathname)) {
				return {
					title: route.meta?.title,
					childTitle: item.meta?.title,
				};
			}
		}
	}
};

const menu = (
	<Menu>
		<Menu.Item key="0">
			<Link to="/">首页</Link>
		</Menu.Item>
		<Menu.Item key="1">
			<Link to="/login">登录</Link>
		</Menu.Item>
	</Menu>
);

function Layouts() {
	const [collapsed, setCollapsed] = useState(false);

	const onCollapse = (collapsed: boolean) => {
		setCollapsed(collapsed);
	};

	const location = useLocation();

	const { pathname } = location;

	const titles = findBreadcrumbTitle(pathname, asyncRoutes);

	const defaultOpenKeys =
		pathname.split("/").length <= 2 ? "/" : "/" + pathname.split("/")[1];

	return (
		<Layout style={{ minHeight: "100vh" }}>
			<Sider collapsible collapsed={collapsed} onCollapse={onCollapse}>
				{/* <div className="logo" /> */}
				<Menu
					theme="dark"
					mode="inline"
					defaultOpenKeys={[defaultOpenKeys]}
					defaultSelectedKeys={[pathname]}
				>
					{asyncRoutes.map((route) => {
						return (
							<SubMenu
								key={route.path}
								icon={route.meta?.icon}
								title={route.meta?.title}
							>
								{(route.children as XRoutes).map((item) => {
									if (item.hidden) return null;

									const to =
										(route.path as string) === "/"
											? "/" + item.path
											: route.path + "/" + item.path;

									return (
										<Menu.Item key={to}>
											<Link to={to}>{item.meta?.title}</Link>
										</Menu.Item>
									);
								})}
							</SubMenu>
						);
					})}
				</Menu>
			</Sider>
			<Layout className="site-layout">
				<Header className="site-layout-background header">
					<Breadcrumb style={{ margin: "15px 10px" }}>
						<Breadcrumb.Item>{titles?.title}</Breadcrumb.Item>
						<Breadcrumb.Item>{titles?.childTitle}</Breadcrumb.Item>
					</Breadcrumb>

					<Dropdown overlay={menu} trigger={["click"]}>
						<Button className="ant-dropdown-link" type="link">
							<img className="avatar" src={avatar} alt="avatar" />
						</Button>
					</Dropdown>
				</Header>
				<Content>
					<div className="site-layout-background">
						<Outlet />
					</div>
				</Content>
				{/* <Footer style={{ textAlign: "center" }}>
					Ant Design ©2018 Created by Ant UED
				</Footer> */}
			</Layout>
		</Layout>
	);
}

export default withAuthorization(Layouts);
